<!--  -->
<template>
	<div class="guess_you_like">
		<div class="g_title"><img src="../../assets/images/icon_guesslike_default@2x.png" /></div>
		<ul>
			<li v-for="(x, indexX) in dataList" @click="clickFN(x)">
				<div class="content">
					<div class="pic">
						<img :src="x.imageSrc+'@300w_300h'" alt="" />
					</div>
					<div class="goods_name">
						<span>{{x.goodsName}}</span>
					</div>
					<p class="goods_price">￥{{x.appPriceMin}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import response from '@/testData/guess_you_like/list'; //模拟的数据
	import { Toast, ActionSheet } from 'vant';

	export default {
		data() {
			return {
				dataList: [],
			};
		},
		watch: {},
		computed: {},
		components: {},
		activated() {},
		deactivated() {},
		created() {
			this.init();
		},
		mounted() {},
		methods: {
			init() {
				let list = response.datas.goodsCommonList;
				this.dataList = list;
			},
			clickFN(item) {
				//console.log(item);
				this.$router.push({
					name: 'goodsDetail',
					query: {
						goodsId: item.goodsId,
					}
				})

			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.guess_you_like {
		.g_title {
			height: rem(80);
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				height: rem(40);
			}
		}
		ul {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			li {
				width: 50%;
				padding: rem(10);
				.content {
					padding: 0 0 rem(10) 0;
					background: #fff;
					border-radius: rem(10);
					box-shadow: rem(1) rem(1) rem(10) #ccc;
					overflow: hidden;
					.pic {
						height: rem(400);
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						img {
							height: 100%;
						}
					}
					.goods_name {
						margin: rem(10) 0 0 0;
						padding: 0 rem(10);
						span {
							font-size: rem(28);
							color: #fc;
							line-height: rem(50);
							height: rem(100);
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							word-break: break-all; //强制换行
						}
					}
					.goods_price {
						padding: 0 rem(10);
						font-size: rem(32);
						color: $theme-red;
						/*font-weight: bold;*/
					}
				}
			}
		}
	}
</style>